<template>
<div>
  <div v-if="!loaded">
    <div class="condition">
      <!-- 地区条件 -->
      <van-popup v-model="city_show_flag" position="top">
        <div class="city-panel">
          <div>
            <div class="city">
              <span>{{city.city}}</span>
            </div>
            <div class="couty">
              <div class="couty-btn">
                <van-button size="small" @click="chooseCouty()">{{city.city}}</van-button>
              </div>
              <div class="couty-btn" v-for="(item, key) in areas" :key="key">
                <van-button size="small" @click="chooseCouty(item.id)">{{item.area}}</van-button>
              </div>
            </div>
          </div>
          <div class="more">更多城市，敬请期待！</div>
        </div>
      </van-popup>
      <!-- 店面类型条件 -->
      <van-popup v-model="shop_show_flag" position="top">
        <div class="shop-panel">
          <div>
            <div class="city">
              <span>连锁店</span>
            </div>
            <div class="couty">
              <div class="couty-btn">
                <van-button size="small" @click="chooseShop()">团操店</van-button>
              </div>
              <div class="couty-btn">
                <van-button size="small" @click="chooseShop()">私教店</van-button>
              </div>
              <div class="couty-btn" v-for="(item, key) in gymsNames" :key="key">
                <van-button size="small" @click="chooseShop(item.id)">{{item.name}}</van-button>
              </div>
            </div>
          </div>
          <div class="more">更多连锁，敬请期待！</div>
        </div>
      </van-popup>
    </div>
    <!-- 轮播图 -->
    <swiper :options="swiperOption">
        <swiper-slide v-for="(image, index) in images" :key="index">
          <img @click="goAds(image.url)" class="swiper-image" :src="image.asset_url | qnImg(null, 200)" alt="">
        </swiper-slide>
    </swiper>
    <!-- 条件栏 -->
    <van-row class="search-condition">
      <van-col class="condition-item" span="12">
        <div class="condition-panel" @click="show_city">
          <span>{{city.city}}</span>
          <van-icon class="search-icon" name="location"/>
        </div>
      </van-col>
      <van-col class="condition-item" span="12">
        <div class="condition-panel" @click="show_shop">
          <span>全部</span>
          <van-icon class="search-icon" name="shop" />
        </div>
      </van-col>
    </van-row>
    <!-- 健身房列表 -->
    <van-list class="shop-list" v-model="loading" :finished="finished" @load="getGymsData">
      <shop-item v-for="(item, index) in gymsList" :key="index"
        :shopId="item.id" :status="item.status" :name="item.name" :address="item.description"
        :thumb="item.preview.image | qnImg(null, 200)" :love="item.love">
      </shop-item>
      <label class="shop-course-wait" v-if="finished && gymsList.length == 0">敬请期待！</label>
    </van-list>
  </div>
  <!-- 定位 -->
  <div class="location" v-if="loaded">
      <van-loading class="load" type="spinner" color="white" />
      <div class="load-text">定位中...</div>
  </div>
</div>
</template>

<script>
import shopItem from '../../components/base/shop-item.vue'
import jscook from 'js-cookie'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'shop',
  comments: 'shop',
  components: {
    'shop-item': shopItem,
    swiper,
    swiperSlide
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      city_show_flag: false,
      shop_show_flag: false,
      city: null,
      areas: [],
      gymsNames: [],
      images: [],
      gymsList: [],
      loaded: true,
      swiperOption: {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        effect: 'fade',
      }
    }
  },

  methods: {
    goAds (url) {
      window.document.location.href = url
    },
    show_city () {
      this.city_show_flag = true
    },
    show_shop () {
      this.shop_show_flag = true
    },
    chooseCouty (id) {
      this.gymsList = []
      const query = Object.assign({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        areaid: id
      })
      this.getGymsNames(query)
      this.city_show_flag = false
    },
    chooseShop (id) {
      console.log(id)
      this.gymsList = []
      this.getGymsData()
      this.shop_show_flag = false
    },
    good (id) {
      alert(id)
    },
    // 获取区县
    getAreas (cityId) {
      var that = this
      this.$axios.get('cities/' + cityId + '/areas').then(response => {
        that.areas = response.data
        console.log(that.areas)
      })
    },
    // 获取广告
    getAds (tag) {
      this.$axios.get('/banners', {
        params: {
          locate: tag
        }
      }).then(response => {
        this.images = response.data
      })
    },
    // 获取所有店铺名称
    getGymsNames (query) {
      this.loading = true
      var that = this
      this.$axios.get('/gyms', {
        params: query
      }).then(response => {
        that.gymsNames = response.data
        that.gymsList = response.data
        that.finished = true
        that.loading = false
      })
    },
    // 获取店铺
    getGymsData (query) {
      console.log(query)
      this.loading = true
      var that = this
      this.$axios.get('/gyms', {
        params: query
      }).then(response => {
        if (response.data && (response.data.length === that.pageSize)) {
          that.pageNum++
        } else {
          that.finished = true
        }
        that.gymsList = that.gymsList.concat(response.data)
        that.loading = false
      })
    },
    getPosition () {
      this.$axios.get('/address/location').then(response => {
        var inFifteenMinutes = new Date(new Date().getTime() + 30 * 60 * 1000)
        jscook.set('position', response.data, {
          expires: inFifteenMinutes
        })
        this.loaded = false
        this.city = JSON.parse(jscook.get('position'))
        this.$toast('当前定位:' + JSON.parse(jscook.get('position')).city || JSON.parse(jscook.get('position')).province)
      })
    }
  },
  created () {
    document.title = '首页'
    const token = +this.$route.params.token || 0
    console.log(this.$route)
    if (token) {
      localStorage.token = token
    }
    if (jscook.get('position') && jscook.get('position') !== 'undefined') {
      this.loaded = false
      this.city = JSON.parse(jscook.get('position'))
      // this.$toast('当前定位:' + JSON.parse(jscook.get('position')).city || JSON.parse(jscook.get('position')).province);
    } else {
      this.loaded = true
      setTimeout(this.getPosition, 300)
    }
    this.getAds('home')
    // this.getAreas(this.city.id)
    this.getAreas(610100)
    this.getGymsData({
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      cityid: 610100
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="postcss" scoped>
.van-card:not(:first-child) {
    margin-top: 5px;
}
img {
  width: 100%;
}
.swiper-image{
  height: 130px;
}
.condition{
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow-y:scroll;
  position: absolute;
  color: #fff;
}
.city{
  clear: both;
}
.city:before,.city:after{
  content: "";
  width: 40%;
  height: 1px;
  background: gray;
  display: block;
  position: relative;
}
.city:before{
  top:12px;
  left:1%;
}
.city:after{
  top:-10px;
  right:-59%;
}
.couty{
  margin:5px 0px;
}
.couty-btn{
  width:33.33%;
  float: left;
  margin: 3px 0px;
}
.couty-btn button{
  min-width: 70px;
}
.more {
  bottom: 0px;
  font-size: 0.8rem;
  clear: both;
  margin:10px 0px;
  font-family: cursive;
}
.search-condition {
    padding: 3px;
    font-size: 1rem;
    background-color: #333;
    color: #f8f8f8;
    position: relative;
    height: 1.4rem;
    line-height: 1.4rem;
}
.search-condition div:first-child{
    border-left: none;
}
.condition-item{
    border-left: 1px solid #fff;
    width: 50%;
}
.condition-panel{
  // position: relative;
  height: 1.4rem;
  justify-content: center;
  display: flex;
}
.condition-panel>span{
  align-self: center;
}
.search-icon{
  // position: absolute;
  // top: 3px;
  // right: 32px;
  align-self: center;
  margin-left: 3px;
}
.shop-list {
  padding: 4px;
}
.shop-list div:first-child {
    margin-top: 0px;
}
.shop-course-wait{
  color: #fff;
}
.location{
  text-align: center;
}
.load{
  margin: 0px auto;
  margin-top: 60%;
}
.load-text{
  color: #fff;
}
</style>
